<template>
  <el-row :gutter="20" class="header-title">
    <el-col :span="12">
    </el-col>
    <el-col :span="2">
      <span class="center">承办部门</span>
    </el-col>
    <el-col :span="4">
      <el-select v-model="partType" placeholder="全部">
        <el-option
            v-for="item in part"
            :key="item.id"
            :label="item.name"
            :value="item.id">
        </el-option>
      </el-select>
    </el-col>
    <el-col :span="2">
      <span class="center">项目名称</span>
    </el-col>
    <el-col :span="4">
      <el-input prefix-icon="el-icon-search" v-model="searchKey"></el-input>
    </el-col>
  </el-row>
  <el-table :data="table" header-cell-class-name="table-header">
    <el-table-column
        prop="uid"
        width="100"
        label="项目编号">
    </el-table-column>
    <el-table-column
        prop="name"
        label="项目名">
    </el-table-column>
    <el-table-column
        label="培训时间">
      <template #default="scope">
        <p style="margin: 0;">起:{{scope.row.startDate.substring(0,10)}}</p>
        <p style="margin: 0;">止:{{scope.row.endDate.substring(0,10)}}</p>
      </template>
    </el-table-column>
    <el-table-column
        prop="people"
        width="100"
        label="培训人数">
    </el-table-column>
    <el-table-column
        prop="part.name"
        label="承办部门">
    </el-table-column>
    <el-table-column
        prop="user.name"
        label="负责人">
    </el-table-column>
    <el-table-column
        prop="createTime"
        width="160"
        label="创建时间">
    </el-table-column>
    <el-table-column
        prop="updateTime"
        width="160"
        label="更新时间">
    </el-table-column>
    <el-table-column
        label="操作">
      <template #default="scope">
        <el-button
            type="text"
            @click="handleLook(scope.$index, scope.row)">查看</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-row justify="end" class="footer-pager">
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[8, 10, 12, 14, 16]"
        :page-size="currentSize"
        layout="sizes, prev, pager, next, jumper"
        :total="tableData.length">
    </el-pagination>
  </el-row>
</template>

<script>
import axios from "axios";

export default {
  name: "FoodCheck",
  components:{},
  data(){
    return{
      tableData:[],
      part:[{
        id:'0',
        name: "全部"
      }],
      currentPage: 1,
      currentSize: 8,
      partType: '',
      searchKey:'',
    }
  },
  methods:{
    handleLook(index,row){
      this.$router.push('foodCheck?id='+row.id);
    },
    handleSizeChange(val) {
      this.currentSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    findAllFoodCheck(){
      return axios.get(this.$host+"/project/check/food").then(response=>{
        if(response.data.code === 0) {
          this.tableData = response.data.data;
        }else{
          this.$message.error(response.data.msg);
        }
      })
    },
    findAllPart(){
      return axios.get(this.$host+"/part").then(response=>{
        if(response.data.code === 0){
          this.part.push(...response.data.data);
        }
      })
    },
  },
  created() {
    this.findAllFoodCheck().then(()=>{this.findAllPart()});
  },
  computed:{
    table(){
      return this.tableData.slice((this.currentPage-1)*this.currentSize,
          Math.min(this.currentPage*this.currentSize,this.tableData.length)).filter((value)=>{
        return this.partType === ''||this.partType ==='0'|| value.part.id === this.partType;
      }).filter((value => {
        return this.searchKey === ''|| value.name.indexOf(this.searchKey) !== -1;
      }));
    }
  }
}
</script>

<style scoped>

</style>